<script type="text/javascript" language="javascript" charset="utf-8">
$(".header-con li a").removeClass("open-menu");
$(".header-con li #employee").addClass("open-menu");
</script>
<div class="boxed clearfix">
  <div class="common-tit">
    <h2>员工列表</h2>
    <span>人资管理 > 员工列表</span>
    <%= link_to '添加员工', new_admin_employee_path, class: "add-staff" %>
  </div>
  <div class="cmlist-tit clearfix">
    <div class="mar-listbox clearfix">
      <div class="multiselect-box">
        <div class="mul-downbtn">
          <em></em>
          <input type="text" placeholder="搜索">
        </div>
        <div class="multiselect-down">
          <ul>
            <% current_company.studios.each do |studio| %>
              <li>
                <span></span>
                <strong data_id="<%= studio.id %>"><%= studio.name %></strong>
              </li>
            <%end%>
          </ul>
          <div class="mul-btn clearfix">
            <div class="mul-confirm">确认</div>
            <div class="mul-cancel">取消</div>
          </div>
        </div>
      </div>
      <div class="list-box">
        <div class="downbtn">
          <span data_id="all">请选择部门</span>
          <em></em>
        </div>
        <ul class="dropdown-menu">
          <li data_id="all">请选择部门</li>
        <% current_company.department_configurations.each do |department| %>
          <li data_id="<%= department.id %>"><%= department.department_name %></li>
        <% end %>
        </ul>
      </div>
      <div class="list-box">
        <div class="downbtn">
          <span data_id="all">请选择性别</span>
          <em></em>
        </div>
        <ul class="dropdown-menu">
          <li data_id="all">请选择性别</li>
          <li data_id="男">男</li>
          <li data_id="女">女</li>
        </ul>
      </div>
      <div class="list-box">
        <div class="downbtn">
          <span data_id="all">请选择职位</span>
          <em></em>
        </div>
        <ul class="dropdown-menu">
          <li data_id="all">请选择职位</li>
        <% current_company.position_configurations.each do |position| %>
          <li data_id="<%= position.id %>"><%= position.position_name %></li>
        <% end %>
        </ul>
      </div>
      <div class="list-box">
        <div class="downbtn">
          <span data_id="all">请选择生日状态</span>
          <em></em>
        </div>
        <ul class="dropdown-menu">
          <li data_id="all">请选择生日状态</li>
          <li data_id="true">当月生日员工</li>
        </ul>
      </div>
      <div class="list-box l-last">
        <div class="downbtn">
          <span data_id="all">请选择在职状态</span>
          <em></em>
        </div>
        <ul class="dropdown-menu">
          <li data_id="all">请选择在职状态</li>
          <li data_id="在职">在职</li>
          <li data_id="离职">离职</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="stlist-con">
    <div class="scrollbox">
      <table>
        <thead>
          <tr>
            <th class="sta-name">姓名</th>
            <th class="sta-sex">性别</th>
            <th class="sta-dep">部门</th>
            <th class="sta-pos">职位</th>
            <th class="sta-branch">分店</th>
            <th class="sta-state">状态</th>
            <th class="sta-operation">操作</th>
          </tr>
        </thead>
      <tbody>
        <% @employees.each do |employee| %>
          <tr>
            <td class="sta-name">
              <span><%= employee.name %></span>
              <%if employee.birthday.present? %> 
                <%if Date.parse("#{employee.birthday}").month == Date.current.month %>
                  <div><em><%= employee.birthday.try("strftime","%m-%d") %></em></div>
                <% end %>
              <% end %>
            </td>
            <td><%= employee.sex %></td>
            <td><%= employee.one_department %></td>
            <td><%= employee.one_position %></td>
            <td><%= employee.one_studio %></td>
            <td><%= employee.status %></td>
            <td class="sta-operation">
              <span>[</span>
              <em><%= link_to '查看详情', admin_employee_path(employee) %></em>
              <span>]</span>
            </td>
          </tr>
        <% end %>
      </tbody>
      </table>
    <div class="apple_pagination">
      <%= paginate @employees, :container => false %>
    </div>
    </div>
  </div>
</div>
<script src="/assets/js/jquery-1.12.3.js"></script>
<script src="/assets/js/common-list.js"></script>


  <script>
    /* 多选下拉列表 */
    $(".mul-downbtn").on("click", function() {
      if (!$(this).next().hasClass("menuopen")) {
        $(this).next().addClass("menuopen");
      }
    });
    $(".multiselect-down li").on("click", function() {
      if ($(this).hasClass("mul-select")) {
        $(this).removeClass("mul-select");
      } else {
        $(this).addClass("mul-select");
      };
    });
    $(".mul-confirm").on("click", function() {
      var arr = [];
      console.log($(this).parent().parent().find(".mul-select").children("strong").text());
      for (var i = 0; i < $(this).parent().parent().find(".mul-select").length; i++) {
        arr.push($($(this).parent().parent().find(".mul-select")[i]).children("strong").text());
      };
      $(this).parent().parent().removeClass("menuopen");
      transData();
    })
    $(".mul-cancel").on("click", function() {
      $(this).parent().parent().removeClass("menuopen");
    })
    $(".mul-downbtn input").on('input',function(e){
      if ($(this).val() != "") {
          console.log($(this).val());
          $(".multiselect-down li").addClass("mul-hide");
          $($(".multiselect-down li:contains(" + $(this).val() + ")")).removeClass("mul-hide");
        } else {
        $(".multiselect-down li").removeClass("mul-hide");
      }
    });
    $(".mar-listbox .list-box li").on("click", function() {
      $(this).parent().parent().find("span").attr("data_id", $(this).attr("data_id"));
      transData();
    })
    function transData() {
      var transD = "";
      for (var i = 0; i < $(".mar-listbox .list-box").length; i++) {
        switch(true) {
          case i == 0: transD += "department" + "=" + $($(".mar-listbox .list-box")[i]).find("span").attr("data_id") + "&";break;
          case i == 1: transD += "sex" + "=" + $($(".mar-listbox .list-box")[i]).find("span").attr("data_id") + "&";break;
          case i == 2: transD += "position" + "=" + $($(".mar-listbox .list-box")[i]).find("span").attr("data_id") + "&";break;
          case i == 3: transD += "birthday" + "=" + $($(".mar-listbox .list-box")[i]).find("span").attr("data_id") + "&";break;
          case i == 4: transD += "status" + "=" + $($(".mar-listbox .list-box")[i]).find("span").attr("data_id");break;
        }
      };
      // studio='1,2,3,4'&department="all"&sex="all"&postion="all"&birthday="all"&status="all"
      if ($(".mar-listbox .multiselect-down").find(".mul-select").length > 0) {
        for (var i = 0; i < $(".mar-listbox .multiselect-down").find(".mul-select").length; i++) {
          if (i == 0) {
            transD += "&" + "studio" + "=" + $($(".mar-listbox .multiselect-down").find(".mul-select")[i]).children("strong").attr("data_id");
          } else {
            transD += "," + $($(".mar-listbox .multiselect-down").find(".mul-select")[i]).children("strong").attr("data_id");
          }

        };
      };
      $.ajax({
        type:'get', url:"/admin/employees/get_employee?"+ transD,
        success: function(data) {
          if (data.error) {
            // console.log("wrong");
          }
        }
      });
    }
  </script>
